<template>
	<view style="padding-bottom: 150rpx;">
		<!-- 筛选比赛类目 -->
		<u-picker :show="bsshow" :columns="bscolumns" keyName="name" confirmColor="#1BA95B" @confirm="lxclose"  @cancel="bsshow=false"></u-picker>
		<!-- 项目弹框 -->
		<u-popup :show="xmshow" @close="xmshow=false" mode="bottom">
			<view class="xiangaotk" style="height: auto;min-height: 400rpx;">
				<view class="flexleft flex_wrap" style="padding: 30rpx 30rpx 140rpx;">
					<view class="ershiw flexcenter margin_top" v-for="item in xmList" :key="item.id" @click="item.ischeck=!item.ischeck">
						<view :class="item.ischeck?'lvsebtn':'huisebtn'">{{item.name}}</view>
					</view>
				</view>
				<view class="flexbetween gudingdb ffffff mainpadding" style="z-index: 12;">
					<view class="wushi flexcenter" @click="xmreset">
						<view class="chongzhibtn">重置</view>
					</view>
					<view class="wushi flexcenter" @click="xmclose">
						<view class="quedbtn">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="qyshow" @close="qyshow=false" mode="bottom">
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<view class="xiangaotk" >
					<view class="" style="padding: 30rpx 0 60rpx;">
						<view class="xiahuaxian ershiba textcenter margin_top"
							:class="item.id==checkarea.id?'fonweight xiaohei':'nofonweight xiaohui'" v-for="item in areaList" :key="item.id" @click="checkareafn(item)">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="flexbetween gudingdb ffffff mainpadding" style="z-index: 12;">
				<view class="wushi flexcenter">
					<view class="chongzhibtn" @click="qyclose()">重置</view>
				</view>
				<view class="wushi flexcenter" @click="qyconfirm()">
					<view class="quedbtn">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-popup :show="sjshow" @close="sjclose" mode="bottom">
			<view class="xiangaotk" style="height: 400rpx;">
				<shijian :messageInfo="{start_time,end_time,mintime}" @confirm="checktime"></shijian>
			</view>
		</u-popup>
		<!-- 切换tab -->
		<view class="flexcenter mainpadding ffffff">
			<view class="flexcenter wushi">
				<view :class="current==1?'focustext':'nofocustext'" @click="selectab(1)">活动</view>
			</view>
			<view class="flexcenter wushi">
				<view :class="current==2?'focustext':'nofocustext'" @click="selectab(2)">比赛</view>
			</view>
		</view>
		<!-- 活动 -->
		<view class="" v-show="current==1">
			<!-- 轮播 -->
			<view class="ffffff  mainpadding2">
				<view class="">
					<u-swiper :list="list1" circular height="180px"  @click="tzlbxq"></u-swiper>
				</view>
				<view class="flexbetween margin_top">
					<view class="ssousuobox" style="width: 71%;">
						<view class="flexbetween">
							<input type="text" placeholder="请输入搜索关键词" v-model="keywords" @confirm="init()" confirm-type="search">
							<view class="ershiba xiaohei nofonweight" @click="init">搜索</view>
						</view>
					</view>
					<view class="huibox flexbetween"  @click="bsshow = true">
						<view class="strongtext xiaohei nofonweight margin_right1">{{type==0?'全部':type==1?"个人赛":"团体赛"}}</view>
						<image class="xxuanze" src="../static/image/system/xiala.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 筛选题目 -->
			<view class="mainpadding ffffff margin_top1">
				<!-- <u-tabs :list="list2" lineColor="#fff" @click="changetab" :activeStyle="{
					    color: '#1BA95B',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#000000',
								fontWeight: '400',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs> -->
				<!-- 筛选 -->
				<view class="flexbetween margin_top1">
					<view class="flexleft" @click="qyshow=true">
						<view class="xiaohei ershil nofonweight sanzi margin_right1">
							{{checkareasure.name || cityinfo.name}}
						</view>
						<view class="xiasajx"></view>
					</view>
					<view class="flexleft" @click="sjshow = true">
						<view class="xiaohei ershil nofonweight margin_right1">时间</view>
						<view class="xiasajx"></view>
					</view>
					<view class="flexleft" @click="xmshow = true">
						<view class="xiaohei ershil nofonweight margin_right1">项目</view>
						<view class="xiasajx"></view>
					</view>
					<view class="flexleft" @click="changegmpx">
						<view class="xiaohei ershil nofonweight margin_right1">规模</view>
						<view class="">
							<view class="shangsjx" v-show="gm_sort!=2"></view>
							<view class="shangsjxs" v-show="gm_sort==2"></view>
							<view class="xiasajx  margin_top0"  v-show="gm_sort!=1"></view>
							<view class="xiasajxs  margin_top0"  v-show="gm_sort==1"></view>
						</view>
					</view>
					<view class="flexleft" @click="changejlpx">
						<view class="xiaohei ershil nofonweight margin_right1">距离</view>
						<view class="">
							<view class="shangsjx" v-show="distance_sort!=2"></view>
							<view class="shangsjxs" v-show="distance_sort==2"></view>
							<view class="xiasajx  margin_top0"  v-show="distance_sort!=1"></view>
							<view class="xiasajxs  margin_top0"  v-show="distance_sort==1"></view>
						</view>
					</view>
				</view>
				<!-- 活动-->
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
				</view>
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzjlbxq(item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="flexleft">
								<view class="xiaolhbtn margin_right1" v-if="item.activity_status==1">未开始</view>
								<view class="xiaocbtn margin_right1" v-if="item.activity_status==2">报名中</view>
								<view class="xiaolabtn margin_right1" v-if="item.activity_status==3">待开赛</view>
								<view class="xiaojubtn margin_right1" v-if="item.activity_status==4">已开赛</view>
								<view class="xiaohbtn margin_right1" v-if="item.activity_status==5">活动结束</view>
								<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							</view>
							<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">开始时间：{{item.bm_starttime_text}}</view>
							<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">结束时间：{{item.bm_endtime_text}}</view>
							<view class="strongtext xiaohui nofonweight margin_right2 yhxk margin_top1">{{item.cityinfo}}{{item.address}}</view>
						</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<view class="touxiang margin_right">
								<image v-if="item.zbfapply" :src="item.zbfapply.logo_text" mode=""></image>
							</view>
							<view class="ershil xiaohei nofonweight "v-if="item.zbfapply">{{item.zbfapply.name}}</view>
						</view>
						<view class="xiaolv ershil nofonweight" v-if="item.activity_status==2">
							正在报名：{{item.bm_join_num}}/{{item.join_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 比赛 -->
		<view class="" v-show="current==2">
			<view class="mainpadding2 ffffff">
				<view class="flexbetween">
					<view class="ssousuobox" style="width: 71%;">
						<view class="flexbetween">
							<input type="text" placeholder="请输入搜索关键词" v-model="keywords" @confirm="init()" confirm-type="search">
							<view class="ershiba xiaohei nofonweight" @click="init">搜索</view>
						</view>
					</view>
					<view class="huibox flexbetween">
						<view class="strongtext xiaohei nofonweight margin_right1" @click="bsshow = true">{{type==0?'全部':type==1?"个人赛":"团体赛"}}</view>
						<image class="xxuanze" src="../static/image/system/xiala.png" mode="" @click="bsshow = true"></image>
					</view>
				</view>
				<!-- <u-tabs :list="list3" lineColor="#fff" @click="changetab" :activeStyle="{
					    color: '#1BA95B',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#000000',
								fontWeight: '400',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs> -->
				<!-- 筛选 -->
				<view class="flexbetween margin_top">
					<view class="flexleft" @click="dakdiz(1)">
						<view class="xiaohei ershil nofonweight sanzi margin_right1">
							{{checkarea.name || cityinfo.name}}
						</view>
						<view class="xiasajx"></view>
					</view>
					
					<view class="flexleft" @click="sjshow = true">
						<view class="xiaohei ershil nofonweight margin_right1">时间</view>
						<view class="xiasajx"></view>
					</view>
					<view class="flexleft" @click="xmshow = true">
						<view class="xiaohei ershil nofonweight margin_right1">项目</view>
						<view class="xiasajx"></view>
					</view>
					<view class="flexleft" @click="changegmpx">
						<view class="xiaohei ershil nofonweight margin_right1">规模</view>
						<view class="">
							<view class="shangsjx" v-show="gm_sort!=2"></view>
							<view class="shangsjxs" v-show="gm_sort==2"></view>
							<view class="xiasajx  margin_top0"  v-show="gm_sort!=1"></view>
							<view class="xiasajxs  margin_top0"  v-show="gm_sort==1"></view>
						</view>
					</view>
					
				</view>
				<view class="margin_top">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll-view-item_H uni-bg-red" v-for="item in ssbqList" :key="item.id" @click="checkssbq(item)">
							<!-- 未选中 -->
							<view :class="item.id==ss_bq_id?'lvbtn margin_right1':'huibtn margin_right1'">{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding_top ffffff" v-if="list.total ">
				<view class="xiahuaxian " :class="index==0?'':'margin_top'" v-for="(item,index) in list.data" :key="item.id" @click="tzxq(item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="flexleft">
								<!-- 1=未开始,2=报名中,3=待开赛,4=已开赛,5=赛事结束 -->
								<view class="xiaolhbtn margin_right1" v-if="item.ss_status==1">未开始</view>
								<view class="xiaocbtn margin_right1" v-if="item.ss_status==2">报名中</view>
								<view class="xiaolabtn margin_right1" v-if="item.ss_status==3">待开赛</view>
								<view class="xiaojubtn margin_right1" v-if="item.ss_status==4">已开赛</view>
								<view class="xiaohbtn margin_right1" v-if="item.ss_status==5">赛事结束</view>
								<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							</view>
							<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">
								开始时间：{{item.bm_starttime_text}}</view>
							<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">
								截至时间：{{item.bm_endtime_text}}</view>
							<view class="strongtext xiaohui nofonweight margin_right2 yhxk margin_top1">{{item.cityinfo}}{{item.address}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbaryhd current=2></tabbaryhd>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 1,
				list1: [],
				list2: [{
						name: '全部',
						value: 1,
					},
					{
						name: '篮球',
						value: 2
					},
					{
						name: '排球',
						value: 3
					}
				],
				bscolumns:[[{
						name: '全部',
						value: 0,
					},
					{
						name: '个人赛',
						value: 1
					},
					{
						name: '团队赛',
						value: 2
					}
				]],
				list3: [{
						name: '全部',
						value: 1,
					},
					{
						name: '比赛类型',
						value: 2
					},
					{
						name: '比赛类型',
						value: 2
					}
				],
				qyshow: false,
				bsshow:false,
				xmshow: false, //项目
				lxshow: false, //类型
				lat: "",
				lng: "",
				cityinfo: {},
				checkaddressinfo: {},
				bannerList: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				type: 0, //类型:1=个人赛,2=团体赛,0=全部
				lx_text:"",
				// 时间筛选开始
				sjshow: false, //时间
				start_time: "",
				end_time: "",
				mintime: Number(new Date()), // 时间筛选结束
				// 项目
				xmList:[],
				cg_category_ids:"",
				gm_sort:0,//规模排序:1=降序,2=升序,0=不查询
				distance_sort:0,//规模排序:1=降序,2=升序,0=不查询
				keywords:"",
				// 赛事标签
				ssbqList:[],
				ss_bq_id:"",
				checkarea:{//区内容
					name:"",//名称
					id:"",//id
				},
				checkareasure:{//区内容
					name:"",//名称
					id:"",//id
				},
				areaList:[]
			}
		},
		onLoad() {
			uni.hideTabBar()
			let cityinfo = uni.getStorageSync("cityinfo")
			if (!cityinfo.id) {
				this.getlocation()
			} else {
				this.cityinfo = cityinfo
			}
			this.getbanner()
			this.init()
			this.getcgfl() //场馆分类/项目
			this.getssbq() //赛事标签
		},
		onShow() {
			let cityinfo = uni.getStorageSync("cityinfo")
			if (cityinfo.id) {
				if (this.cityinfo.id != cityinfo.id) {
					this.checkareasure.name = ""
					this.checkareasure.id = ""
					this.checkarea.name = ""
					this.checkarea.id = ""
				}
				this.cityinfo = cityinfo
				this.getarealist()
			}
			this.init()
		},
		onShareAppMessage: function() {
			return {
				title: '动佳',
				path: '/pages/kaiping'
			}
		},
		onShareTimeline: function() {
			return {
				title: '动佳',
				path: '/pages/kaiping'
			}
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					city_id: this.checkaddressinfo.id || this.cityinfo.id,
					start_time: this.start_time,
					end_time: this.end_time,
					cg_category_ids:this.cg_category_ids,
					type:this.type,
					gm_sort:this.gm_sort,
					keywords:this.keywords,
					ss_bq_id:this.ss_bq_id,
					ss_type:2,//赛事类型:1=主办方,2=俱乐部
				}
				let url = '/api/sscl/ssIndex'
				if(this.current==1){//活动
					data = {
						page: page || 1,
						limit: _this.limit,
						city_id: this.cityinfo.id,
						area_id: this.checkareasure.id,
						start_time: this.start_time,
						end_time: this.end_time,
						cg_category_ids:this.cg_category_ids,
						type:this.type,
						gm_sort:this.gm_sort,
						keywords:this.keywords,
						distance_sort:this.distance_sort,
						lat:this.lat,
						lng:this.lng,
					}
					url = '/api/Activitycl/activityIndex'
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						this.$forceUpdate()
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 项目
			xmreset(){
				this.xmList.forEach(item=>{
					item.ischeck = false
				})
				this.xmclose()
			},
			xmclose() {
				this.xmshow = false
				let arr = []
				this.xmList.forEach(item=>{
					if(item.ischeck){
						arr.push(item.id)
					}
				})
				this.cg_category_ids = arr.join()
				this.init()
			},
			// 类型
			lxclose(e) {
				this.bsshow = false
				// this.lx_text = e.value[0].name
				this.type = e.value[0].value
				// console.log(this.type,e,"999");
				this.init()
			},
			changegmpx(){
				this.gm_sort = this.gm_sort==1?2:this.gm_sort==2?0:1
				this.init()
			},
			changejlpx(){
				this.distance_sort = this.distance_sort==1?2:this.distance_sort==2?0:1
				this.init()
			},
			getssbq() {
				httpRequest.request('/api/sscl/ssBqIndex', 'POST', {}, false, false, true).then(res => {
					this.ssbqList = res.data
				})
			},
			getcgfl() {
				httpRequest.request('/api/index/cgCategory', 'POST', {}, false, false, true).then(res => {
					res.data.forEach(item=>{
						this.$set(item,"ischeck",false)
					})
					this.xmList = res.data
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 7,
					is_more: 1
				}, false, false, true).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
					this.bannerList = res.data
				})
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res, "999");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getcityInfo()
					},
					fail(err) {
						console.log(err, 23432);
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.cityinfo = {
						name: res.data.name,
						lat: res.data.lat,
						lng: res.data.lng,
						id: res.data.id,
						pid: res.data.pid
					}
					uni.setStorageSync("cityinfo", this.cityinfo)
					this.getarealist()
				})
			},
			getarealist(){
				httpRequest.request('/api/index/getAreaList', 'POST', {
					city_id:this.cityinfo.id
				}, false, false, true).then(res => {
					this.areaList = res.data
				})
			},
			checktime(e) {
				this.start_time = e.start
				this.end_time = e.end
				this.mintime = e.mintime
				this.sjshow = false
				this.init()
			},
			// 跳转创建个人赛
			tzcjgrs(){
				uni.navigateTo({
					url:'/pages_julebu/gerensaicj'
				})
			},
			// 赛事标签
			checkssbq(item){
				this.ss_bq_id = item.id
				this.init()
			},
			// 跳转赛事详情
			tzxq(id) {
				uni.navigateTo({
					url: '/pages_saishi/saishixq?id='+id
				})
			},
			// 跳转轮播详情
			tzlbxq(e) {
				uni.navigateTo({
					url: '/pages_homepage/bannerxq?id=' + this.bannerList[e].id
				})
			},
			// 跳转位置
			dakdiz(val) {
				uni.navigateTo({
					url: '/pages_homepage/dingwei'
				})
			},
			// 跳转活动详情
			tzjlbxq(id) {
				uni.navigateTo({
					url: '/pages_julebu/huodongxq?id='+id
				})
			},
			checkareafn(item){
				this.checkarea.name = item.name
				this.checkarea.id = item.id
			},
			qyclose() {
				this.checkareasure = {name:"",id:""}
				this.checkarea = {name:"",id:""}
				this.qyshow = false
				this.init()
			},
			qyconfirm() {
				this.checkareasure = this.checkarea
				this.qyshow = false
				this.init()
			},
			sjclose() {
				this.sjshow = false
			},
			selectab(i) {
				if (i == this.current) {
					return false
				}
				this.current = i
				this.list.data = []
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huisebtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lvsebtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolabtn {
		width: 80rpx;
		height: 40rpx;
		background: #078CE6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaohbtn {
		width: 100rpx;
		height: 40rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #091636;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolhbtn {
		width: 80rpx;
		height: 40rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaojubtn {
		width: 80rpx;
		height: 40rpx;
		background: #F8B900;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaocbtn {
		width: 80rpx;
		height: 40rpx;
		background: #F76222;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bistup {
		width: 100%;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.baibox {
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	}

	.lvline {
		width: 2rpx;
		height: 20rpx;
		background: #BFE6D1;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
	}
	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}
	
	.lvbtn {
		background: #DFFFED;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1BA95B;
	}

	.hrnlvbtn {
		width: 84rpx;
		height: 32rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1BA95B;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #1BA95B;
	}

	.lvbox {
		background: #EFFFF6;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.xxuanze {
		width: 22.77rpx;
		height: 12.77rpx;

	}

	.huibox {
		padding: 14rpx 12rpx;
		background: #F5F5F5;
		border-radius: 22rpx;
	}

	.touxiang {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.quedbtn {
		width: 292rpx;
		height: 72rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chongzhibtn {
		width: 292rpx;
		height: 72rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wushi {
		width: 50%;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.margin_top0 {
		margin-top: 6rpx;
	}

	.shangsjx {
		width: 10rpx;
		height: 8rpx;
		background-image: url('@/static/image/system/shangsjx.png');
		background-size: 100% 100%;
	}

	.xiasajx {
		width: 10rpx;
		height: 8rpx;
		background-image: url('@/static/image/system/xiasanj.png');
		background-size: 100% 100%;
	}

	.wushi {
		width: 50%;
	}

	.focustext {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #1BA95B;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	page {
		background: #F9F9F9;
	}
</style>